<template>
  <div class="select-area">
    <van-popup v-model="showSelectArea" position="bottom" @close="cancel">
      <van-area ref="selectArea" title="请选择地区" :area-list="areaList" @confirm="confirm" @cancel="cancel" />
    </van-popup>
  </div>
</template>

<script>
import { areaList } from '@vant/area-data'

export default {
  name: 'SelectArea',
  components: {},
  props: {
    showSelectArea: { type: Boolean, default: false }
  },
  data () {
    return {
      areaList
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    confirm (value) {
      this.$emit('confirm', value)
    },
    cancel () {
      this.$refs.selectArea.reset()
      this.$emit('close')
    }
  }
}
</script>

<style scoped lang="less">

</style>
